<template>
  <div class="w-100% h-100% flex justify-between overflow-hidden">
    <div class="w-65% h-100%">
      <a-calendar
        v-model:value="calendarTime"
        @select="onSelect"
        @panelChange="onPanelChange"
      >
        <template #dateCellRender="{ current }">
          <template v-for="item in getListData(current)">
            <div class="flex flex-col">
              <a-badge :status="item.type" :text="item.content" />
            </div>
          </template>
        </template>
      </a-calendar>
    </div>
    <div class="w-34% h-100% flex">
      <a-card class="card">
        <template #extra>
          <a-button
            class="!rounded-10 overflow-hidden"
            type="primary"
            @click="() => (visible = true)"
            >新增</a-button
          >
        </template>
        <template #title>
          <span class="font-bold">今日计划</span>
        </template>
        <Draggable
          v-model="todayThingList.data"
          :animation="100"
          item-key="id"
          :forceFallback="true"
          @change="onMoveCallback"
          :move="getdata"
        >
          <template #item="{ element }">
            <div
              class="p-10 bg-white rounded-5 flex flex-wrap flex-col shadow-md"
              not-last:mb-20
            >
              <div class="flex self-end">
                <a-button
                  class="flex items-center justify-center ml-10"
                  shape="circle"
                  size="small"
                >
                  <i class="i-ant-design-drag-outlined block bg-blue-600"></i>
                </a-button>
                <a-button
                  class="flex items-center justify-center ml-10"
                  shape="circle"
                  size="small"
                  v-if="element.type === 'warning'"
                >
                  <a-popconfirm
                    title="确定完成？"
                    ok-text="确定"
                    cancel-text="取消"
                    placement="left"
                  >
                    <i class="i-ant-design-flag-outlined block bg-blue-600"></i>
                  </a-popconfirm>
                </a-button>
                <a-button
                  class="flex items-center justify-center ml-10"
                  shape="circle"
                  size="small"
                  v-if="element.type === 'success'"
                >
                  <a-popconfirm
                    title="确定未完成？"
                    ok-text="确定"
                    cancel-text="取消"
                    placement="left"
                  >
                    <i class="i-ant-design-flag-outlined block bg-red-600"></i>
                  </a-popconfirm>
                </a-button>
                <a-button
                  class="flex items-center justify-center ml-10"
                  shape="circle"
                  size="small"
                >
                  <i class="i-ant-design-edit-outlined block bg-blue-600"></i>
                </a-button>
                <a-popconfirm
                  title="操作不可逆！确定删除？"
                  ok-text="确定"
                  cancel-text="取消"
                  placement="left"
                >
                  <a-button
                    class="flex items-center justify-center ml-10"
                    shape="circle"
                    size="small"
                  >
                    <i
                      class="i-ant-design-delete-outlined block bg-blue-600"
                    ></i>
                  </a-button>
                </a-popconfirm>
              </div>

              <div class="flex flex-wrap pt-10">
                <span>{{ element.content }}</span>
              </div>
            </div>
          </template>
        </Draggable>
      </a-card>
    </div>
    <a-drawer
      v-model:visible="visible"
      style="color: red"
      title="添加事务"
      placement="right"
      @after-visible-change="afterVisibleChange"
    >
      <a-form
        class="mt-20"
        :model="formState"
        v-bind="layout"
        name="nest-messages"
        :validate-messages="validateMessages"
        @finish="onFinish"
      >
        <a-form-item label="内容">
          <a-textarea
            :rows="4"
            v-model:value="formState.memorandum.introduction"
          />
        </a-form-item>
        <a-form-item label="通知">
          <a-checkbox v-model:checked="formState.memorandum.noticeStatus"
            >是</a-checkbox
          >
        </a-form-item>
        <div class="flex w-100% justify-end">
          <a-button type="primary" html-type="submit">添加</a-button>
        </div>
      </a-form>
    </a-drawer>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import { Dayjs } from "dayjs";
import Draggable from "vuedraggable";
import CalendarUtil, {
  getDataFromYearMonthDay,
  iThingsData,
} from "../../utils/calendar-util";
import dayjs from "dayjs";

const visible = ref<boolean>(false);
const afterVisibleChange = (bool: boolean) => {
  console.log("visible", bool);
};

const thingList = reactive({
  data: [
    {
      type: "success",
      content: "吃饭",
      time: "2022-10-12 16:00:00",
    },
    {
      type: "warning",
      content: "吃饭1",
      time: "2022-10-12 16:00:00",
    },
    {
      type: "success",
      content: "吃饭",
      time: "2022-8-12 16:00:00",
    },
    {
      type: "success",
      content: "吃饭",
      time: "2023-8-12 16:00:00",
    },
  ],
});

const todayThingList = reactive({
  data: [],
});

const calendarData = reactive({
  data: {} as any,
});

const getListData = (value: any) => {
  let year = value.year();
  let month = value.month() + 1;
  let day = value.date();
  return getDataFromYearMonthDay(calendarData.data, year, month, day);
};

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};

const formState = reactive({
  type: "1",
  memorandum: {
    datePicker: "",
    introduction: "",
    noticeStatus: false,
  },
});

const validateMessages = {
  required: "${label} is required!",
  types: {
    email: "${label} is not a valid email!",
    number: "${label} is not a valid number!",
  },
  number: {
    range: "${label} must be between ${min} and ${max}",
  },
};

const onFinish = (values: any) => {
  console.log("Success:", values);
};

const onMoveCallback = (val: any) => {
  console.log("拖动前的索引 :" + val.moved.newIndex);
  console.log("拖动后的索引 :" + val.moved.oldIndex);
};
const getdata = (val: any) => {
  console.log(val.draggedContext.element.id);
};

const calendarTime = ref();
const selectedValue = ref(dayjs().format("YYYY-MM-DD"));

const onSelect = (value: any) => {
  calendarTime.value = value;
  selectedValue.value = value.format("YYYY-MM-DD");
};

const onPanelChange = (value: string) => {
  calendarTime.value = value;
};

let initCalendarData = () => {
  let calendarUtil = new CalendarUtil(thingList);
  calendarData.data = calendarUtil.getHandleThingsData();
};

let initWatch = () => {
  watch(
    () => selectedValue.value,
    (newValue: any, oldValue: any) => {
      initTodayThingList()
    }
  );
};

let initTodayThingList = () => {
  let value = dayjs(selectedValue.value);
  let year = value.year();
  let month = value.month() + 1;
  let day = value.date();
  console.log(year, month, day);
  todayThingList.data = getDataFromYearMonthDay(
    calendarData.data,
    year,
    month,
    day
  );
};

let init = () => {
  initCalendarData();
  initTodayThingList();
};

onMounted(() => {
  init();
  initWatch();
});
</script>

<style scoped lang="less">
.card {
  display: flex;
  flex-direction: column;

  flex: 1;
  ::v-deep(.ant-card-body) {
    padding: 10px;
    flex: 1 1 auto;
    height: 0;
    overflow: auto;
  }
}
</style>
